<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<style>
			#search {
				padding: 5px 10px;
				border: 2px solid red;
				outline: none;
				border-radius: 4px;
			}
			
			#search.on {
				border: 2px solid blue;
			}
			
			#search.on::placeholder{
				color: #ccc;
			}
		</style>
	</head>
	<body>
		<input id="search" type="text" placeholder="行车记录仪">
		
		<script>
			$(function(){
				$('#search').on('focus',function(){
					$('#search').addClass('on');
				}).on('blur',function(){
					$('#search').removeClass('on');
				})
				
				function getKeyword(){
					var arr = ['行车记录仪','西行寺幽幽子','藤原妹红','秦心','两仪式'];
					var rand = Math.random();
					var index = rand * arr.length;
					index = Math.floor(index);
					var keyword = arr[index];
					return keyword;
				}
				setInterval(function(){
					$('#search').attr('placeholder',getKeyword());
				},3000);
				
				var keyword;
				$('#search').on('focus',function(){
					keyword = $('#search').attr('placeholder');
				})
				
				$('#search').on('input propertychange',function(){
					if(!$('#search').val()){
						$('#search').attr('placeholder',keyword);
					}
				})
			})
		</script>
		
		<div>
			<input id="phone" type="tel" placeholder="请输入手机号" value=""><br>
			<input id="code" type="text" maxlength="6" placeholder="请输入验证码" value=""><br>
			<a id="send">发送验证码</a>
		</div>
		<script>
			$(function(){
				$('#send').on('click',function(){
					if($('#send').hasClass('disabled')){
						return;
					}
					var phone = $('#phone').val();
					if(!phone){
						alert('请输入手机号')
						return;
					}
					var phoneReg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
					if(!phoneReg.test(phone)){
						alert('请输入有效手机号');
						return;
					}
					$('#send').addClass('disabled');
					daojishi();
				})
				function daojishi(){
					var time = 60;
					$('#send').text('('+time+')');
					var interval = setInterval(function(){
						time--;
						if(time <= 0){
							clearInterval(interval);
							$('#send').removeClass('disabled');
							$('#send').text('发送验证码');
						}else{
							$('#send').text('('+time+')');
						}
					},1000);
				}
			})
		</script>
	</body>
</html>